<template>
    <div class="pageWrapper">
        <SearchBar class="form" @onSearch="handleSearch" @childFn="resetForm">
            <SearchBarItem label="支付订单号：" :labelLg="8">
                <Input
                    type="text"
                    v-model="dataModule.paymentId"
                    placeholder="请输入"
                    clearable
                />
            </SearchBarItem>
            <SearchBarItem label="渠道支付订单号：" :labelLg="8">
                <Input
                    type="text"
                    v-model="dataModule.flowId"
                    placeholder="请输入"
                    clearable
                />
            </SearchBarItem>
            <!-- <SearchBarItem label="商户编码：" :labelLg="8">
                <Input type="text" v-model="dataModule.merchantCode" placeholder="请输入" clearable />
            </SearchBarItem> -->
            <SearchBarItem label="交易类型：" :labelLg="8">
                <Select
                    v-model="dataModule.transactionType"
                    placeholder="请选择"
                    :clearable="isClear"
                >
                    <Option
                        :value="item.key"
                        v-for="(item, key) in selectTransactionType"
                        :key="key"
                        >{{ item.value }}</Option
                    >
                </Select>
            </SearchBarItem>
            <SearchBarItem label="交易金额：" :labelLg="8">
                <Input
                    type="number"
                    v-model.trim="dataModule.payAmount"
                    placeholder="请输入"
                    clearable
                />
            </SearchBarItem>
            <SearchBarItem label="优惠金额：" :labelLg="8">
                <Input
                    type="number"
                    v-model.trim="dataModule.discount"
                    placeholder="请输入"
                    clearable
                />
            </SearchBarItem>
            <SearchBarItem label="银行流水号：" :labelLg="8">
                <Input
                    v-model.trim="dataModule.bankOrderId"
                    placeholder="请输入"
                    clearable
                />
            </SearchBarItem>
            <SearchBarItem label="通道费：" :labelLg="8">
                <Input
                    type="text"
                    v-model="dataModule.serviceCharge"
                    placeholder="请输入"
                    clearable
                />
            </SearchBarItem>
            <SearchBarItem label="对账时间：" :labelLg="8">
                <DatePicker
                    type="daterange"
                    ref="createDatePicker"
                    split-panels
                    transfer
                    placeholder="选择时间区间"
                    @on-change="createTime"
                    :value="reconciliationValue"
                ></DatePicker>
            </SearchBarItem>
            <SearchBarItem label="交易时间：" :labelLg="8">
                <DatePicker
                    type="daterange"
                    ref="createDatePickerPay"
                    split-panels
                    transfer
                    placeholder="选择时间区间"
                    @on-change="payTime"
                ></DatePicker>
            </SearchBarItem>
        </SearchBar>
        <RemoteTable
            ref="remoteTable"
            :namespace="namespace"
            :columns="columns"
            :showPageInfo="true"
            :isFixedHeader="true"
            @onSortChange="onSortChange"
        >
          <template #extra>
            <Authc permissions="trade:settlement:cmb">
              <Button type="primary" @click="getExportExcel">导出</Button>
            </Authc>
          </template>

        </RemoteTable>
    </div>
</template>
<script>
import {
    Button,
    Input,
    Modal,
    Message,
    Col,
    Row,
    Form,
    FormItem,
    DatePicker,
    Select,
    Option,
    Card
} from "view-design";
import RemoteTable from "@/components/RemoteTable";
import SearchBar from "@/components/SearchBar";
import RemoteSelect from "@/components/RemoteSelect";
import { namespace } from "../Module/settlementDetail";
import Authc from "@/components/Authc";
import Tables from "@/components/tables";
import Action from "./Action";
import config from "@/utils/config";
import appService from "@/utils/appService";
import util from "@/utils/util";

export default {
    name: "settlementDetail",
    components: {
        RemoteTable,
        SearchBar,
        SearchBarItem: SearchBar.SearchBarItem,
        RemoteSelect,
        Authc,
        Action,
        Tables,
        Button,
        Input,
        Modal,
        Message,
        Col,
        Row,
        Form,
        FormItem,
        DatePicker,
        Select,
        Option,
        Card
    },
    data() {
        return {
            requireUrl: "",
            namespace: namespace,
            isClear: true,
            loading: true,
            modal1: false,
            dataModule: {}, //查询条件
            selectTransactionType: [], //交易类型
            reconciliationValue: [],
            exportData: [],
            columns: [
                {
                    title: "平台流水",
                    align: "center",
                    children: [
                        // {
                        //     type: "selection",
                        //     align: "center",
                        //     minWidth: 55
                        // },
                        {
                            title: "序号",
                            type: "index",
                            align: "center",
                            minWidth: 80
                        },
                        {
                            title: "交易类型",
                            key: "transactionTypeCn",
                            align: "center",
                            minWidth: 100
                        },
                        {
                            title: "支付订单号",
                            key: "paymentId",
                            align: "center",
                            minWidth: 240
                        },
                        {
                            title: "渠道支付订单号",
                            key: "flowId",
                            align: "center",
                            minWidth: 240
                        },
                        // {
                        //   title: "商户编码",
                        //   key: "merchantCode",
                        //   align: "center",
                        //   minWidth: 240
                        // },
                        {
                            title: "订单金额(元)",
                            key: "orderAmount",
                            align: "center",
                            minWidth: 120,
                            render: (h, params) => {
                                let item = params.row.orderAmount / 100;
                                return h("span", util.toMoney(item));
                            }
                        },
                        {
                            title: "优惠金额(元)",
                            key: "discount",
                            align: "center",
                            minWidth: 120,
                            render: (h, params) => {
                                let item = params.row.discount / 100;
                                return h("span", util.toMoney(item));
                            }
                        },
                        {
                            title: "交易金额(元)",
                            key: "payAmount",
                            align: "center",
                            minWidth: 120,
                            render: (h, params) => {
                                let item = params.row.payAmount / 100;
                                return h("span", util.toMoney(item));
                            }
                        },
                        {
                            title: "通道费(元)",
                            key: "serviceCharge",
                            align: "center",
                            minWidth: 100,
                            render: (h, params) => {
                                let item =  params.row.serviceCharge / 100;
                                return h(
                                    "span",
                                    util.toMoney(item)
                                );
                            }
                        }
                    ]
                },
                {
                    title: "银行流水",
                    align: "center",
                    children: [
                        {
                            title: "订单金额(元)",
                            key: "bankOrderAmount",
                            align: "center",
                            minWidth: 120,
                            render: (h, params) => {
                                let item = params.row.bankOrderAmount / 100;
                                return h(
                                    "span",
                                    util.toMoney(item)
                                );
                            }
                        },
                        {
                            title: "优惠金额(元)",
                            key: "bankDiscount",
                            align: "center",
                            minWidth: 120,
                            render: (h, params) => {
                                let item = params.row.bankDiscount / 100;
                                return h("span", util.toMoney(item));
                            }
                        },
                        {
                            title: "交易金额(元)",
                            key: "bankPayAmount",
                            align: "center",
                            minWidth: 120,
                            render: (h, params) => {
                                let item = params.row.bankPayAmount / 100;
                                return h(
                                    "span",
                                    util.toMoney(item)
                                );
                            }
                        },
                        {
                            title: "通道费(元)",
                            key: "bankServiceCharge",
                            align: "center",
                            minWidth: 100,
                            render: (h, params) => {
                                let item = params.row.bankServiceCharge / 100;
                                return h(
                                    "span",
                                    util.toMoney(item)
                                );
                            }
                        },
                        {
                            title: "交易时间",
                            key: "payTime",
                            align: "center",
                            minWidth: 150
                        }
                    ]
                },
                {
                    title: "对账结果",
                    align: "center",
                    children: [
                        {
                            title: "对账时间",
                            key: "reconciliationTime",
                            align: "center",
                            minWidth: 150
                        },
                        {
                            title: "差异(元)",
                            key: "diffAmount",
                            align: "center",
                            minWidth: 120,
                            render: (h, params) => {
                                let item = params.row.diffAmount / 100;
                                return h("span", util.toMoney(item));
                            }
                        },
                        {
                            title: "差异原因",
                            key: "remark",
                            align: "center",
                            minWidth: 120
                        },
                        {
                            title: "操作",
                            key: "action",
                            minWidth: 100,
                            align: "center",
                            permissions: ["trade:settlement:cmb"],
                            render: function(h, data) {
                                return h(Action, {
                                    props: {
                                        row: data.row
                                    }
                                });
                            }
                        }
                    ]
                }
            ]
        };
    },
    created() {
        /**
         * 如果 url 没有带参数，就重置请求参数
         * 有就添加到 vuex
         * **/
        let timeBegin = util.getUrlParam('reconciliationDateBegin');
        let timeEnd = util.getUrlParam('reconciliationDateEnd');
        let status = util.getUrlParam('reconciliationStatus');
        if( timeBegin ) {
            this.$store.commit(`${namespace}/setQuery`, {
                reconciliationDateBegin: timeBegin,
                reconciliationDateEnd: timeEnd,
                reconciliationStatus: status
            });
            this.$set(this.reconciliationValue, 0, timeBegin);
            this.$set(this.reconciliationValue, 1, timeEnd);
        } else {
            this.$store.commit(`${namespace}/reviseQuery`);
        }
        this.getKey();
    },
    mounted() {
        setTimeout(() => {
            this.loading = false;
        }, 1000);
    },
    methods: {
        /** 导出 */
        async getExportExcel () {
            try {
                let res = await this.$store.dispatch(`${namespace}/exportExcel`, this.dataModule);

                util.exportExcle(res, '流水明细对账表')
            } catch (error) {
                this.$Message.error({
                    content: error
                })
            }
        },
        // exportExcel () {
        //     if( this.exportData.length == 0 ) {
        //         this.$Message.error({
        //             content: '请选择导出的数据'
        //         });
        //         return;
        //     } else {
        //         this.exportData.forEach(e => {
        //             if (e.orderAmount || e.discount || e.payAmount || e.serviceCharge || e.bankOrderAmount || e.bankDiscount || e.bankPayAmount || e.bankServiceCharge || e.diffAmount) {
        //                 e.orderAmount = e.orderAmount / 100;
        //                 e.discount = e.discount / 100;
        //                 e.payAmount = e.payAmount / 100;
        //                 e.serviceCharge = e.serviceCharge / 100;
        //                 e.bankOrderAmount = e.bankOrderAmount / 100;
        //                 e.bankDiscount = e.bankDiscount / 100;
        //                 e.bankPayAmount = e.bankPayAmount / 100;
        //                 e.bankServiceCharge = e.bankServiceCharge / 100;
        //                 e.diffAmount = e.diffAmount / 100;
        //             }
        //         })
        //     }
        //      /** 多表头处理 **/
        //     let exportColumn = this.handleMultiTableHeader(this.columns, false);
        //     /** 复制一份表头 **/
        //     let columnOne = {};
        //     exportColumn.forEach(item => {
        //         columnOne[item.key] = item.title;
        //     });

        //     /** 自定义导出表格第一行的表头，逗号表示隔开几个单元格 **/
        //     let tableTitle = {
        //         transactionTypeCn: `${this.columns[0].title},,,,,,,${this.columns[1].title},,,,,${this.columns[2].title}`,
        //         shouldClearDate: '',
        //         paymentId: '',
        //         flowId: '',
        //         orderAmount: '',
        //         discount: '',
        //         payAmount: '',
        //         serviceCharge: '',
        //         bankOrderAmount: '',
        //         bankDiscount: '',
        //         bankPayAmount: '',
        //         bankServiceCharge: '',
        //         payTime: '',
        //         reconciliationTime: '',
        //         diffAmount: '',
        //         remark: ''
        //     }
        //     /** 复制一份导出数据 **/
        //     let copyTableData = JSON.parse(JSON.stringify(this.exportData));

        //     /** 把自定义的表头和复制出来的表头，添加到导出数据前面 **/
        //    copyTableData.unshift(tableTitle, columnOne);

        //     let tables = this.$refs.remoteTable.getTables();
        //     tables.exportCsv({
        //         filename: '流水明细对账',
        //         columns: exportColumn,
        //         data: copyTableData.map(item => {
        //             return {
        //                 transactionTypeCn: item.transactionTypeCn ? `\t${item.transactionTypeCn}` : '',
        //                 shouldClearDate: item.shouldClearDate ? `\t${item.shouldClearDate}` : '',
        //                 paymentId: item.paymentId ? item.paymentId : '',
        //                 flowId: item.flowId ? `\t${item.flowId}` : '',
        //                 orderAmount: item.orderAmount ? `\t${item.orderAmount}` : '\t0',
        //                 discount: item.discount ? `\t${item.discount}` : '\t0',
        //                 payAmount: item.payAmount ? item.payAmount : '\t0',
        //                 serviceCharge: item.serviceCharge ? item.serviceCharge : '\t0',
        //                 bankOrderAmount: item.bankOrderAmount ? item.bankOrderAmount : '\t0',
        //                 bankDiscount: item.bankDiscount ? `\t${item.bankDiscount}` : '\t0',
        //                 bankPayAmount: item.bankPayAmount ? `\t${item.bankPayAmount}` : '\t0',
        //                 bankServiceCharge: item.bankServiceCharge ? `\t${item.bankServiceCharge}` : '\t0',
        //                 payTime: item.payTime ? `\t${item.payTime}` : '',
        //                 reconciliationTime: item.reconciliationTime ? `\t${item.reconciliationTime}` : '',
        //                 diffAmount: item.diffAmount ? `\t${item.diffAmount}` : '\t0',
        //                 remark: item.remark ? `\t${item.remark}` : ''
        //             }
        //         }),
        //         noHeader: true
        //     });

        // },
        /** 获取选中的数据 **/
        // getListChecked(data){
        //     this.exportData = data;
        // },
        /** cy 处理多表头导出问题 **/
        // handleMultiTableHeader (columns) {
        //     return columns.map(res => {
        //         if (res.hasOwnProperty('children')) {
        //             /** 通过 key 过滤掉 复选框和序号还有操作栏 **/
        //             return res.children.filter(item => {
        //                 return item.key;
        //             })
        //         } else {
        //             return res;
        //         }
        //     }).flat();
        // },
        getKey() {
            this.$store.dispatch(`${namespace}/getKey`).then(res => {
                if (res.data.ret === 0) {
                    let data = res.data.data;
                    this.selectTransactionType = data.transactionType;
                }
            });
        },
        handleSearch() {
            let page = {
                currentPage: 1,
                pageSize: 10
            };
            let data = {
                payAmount: this.dataModule.payAmount * 100,
                discount: this.dataModule.discount * 100,
                serviceCharge: this.dataModule.serviceCharge * 100
            };
            this.$store.dispatch(`${namespace}/query`, {
                ...this.dataModule,
                ...data,
                ...page
            });
        },
        onSortChange(sort) {
            if (sort.order === "normal") {
                this.queryParam.order = [];
            } else {
                this.queryParam.order = [sort.key + " " + sort.order];
            }
            this.handleSearch();
        },
        // 清空事件；
        resetForm() {
            this.$store.commit(`${namespace}/reviseQuery`);
            this.$set(this.dataModule, "paymentId", "");
            this.$set(this.dataModule, "flowId", "");
            this.$set(this.dataModule, "merchantCode", "");
            this.$set(this.dataModule, "transactionType", "");
            this.$set(this.dataModule, "payAmount", ""); // 交易金额
            this.$set(this.dataModule, "discount", ""); // 优惠金额
            this.$set(this.dataModule, "serviceCharge", ""); // 优惠金额
            this.$set(this.dataModule, "bankOrderId", ""); // 银行流水号
            // 清空时间选择
            this.$refs["createDatePicker"].handleClear();
            this.$refs["createDatePickerPay"].handleClear();
        },
        /** 对账时间 **/
        createTime(date, type) {
            this.dataModule.reconciliationDateBegin = date ? date[0] : "";
            this.dataModule.reconciliationDateEnd = date ? date[1] : "";
        },
        /** 支付时间 **/
        payTime(date, type) {
            this.dataModule.payTimeBegin = date ? date[0] : "";
            this.dataModule.payTimeEnd = date ? date[1] : "";
        },
        goToDetail() {
            this.$router.push({
                path:
                    "/settlement/admin/SettlementCenter/SettlementDetailForm",
                query: { id: "111111111" }
            });
        }
    }
};
</script>
<style lang="less" scoped>
.pageWrapper {
    .ivu-table-border th {
        border-right: none;
    }
}
</style>
